<template>
  <div class="p-30">
    <!-- 社团成员列表 -->
    <el-table :data="list" class="w-800">
      <el-table-column
          width="100"
      >
        <template v-slot="{row}">
          {{ row.stu_code.slice(0, 4) }}级
        </template>
      </el-table-column>
      <el-table-column
          label="姓名"
          prop="name"
      ></el-table-column>
      <el-table-column
          label="参与活动数"
          prop="joinActivityCount"
      ></el-table-column>
      <el-table-column
          label="操作"
      >
        <template v-slot="{row}">
          <el-button type="danger" @click="upMemberSociety(row.id)">移出社团</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 社团成员列表 end -->
    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>limit"
        :page-size="limit"
        :current-page.sync="pageNo"
        class="pt-30 text-center"
    ></el-pagination>
    <!-- 分页器 end-->
  </div>
</template>

<script>
import {getSocietyMembers, upMemberSociety} from '@/api/society'

export default {
  name: "Member",
  data() {
    return {
      pageNo: 1,
      limit: 10,
      total: 0,
      list: []
    }
  },
  mounted() {
    this.getSocietyMembers()
  },
  methods: {
    async getSocietyMembers() {
      let {pageNo, limit} = this;
      let result = await getSocietyMembers({society_id: this.$store.getters.society_id, pageNo, limit});
      if (result.code === 200) {
        this.list = result.list;
        this.total = result.total
      }
    },
    async upMemberSociety(id){
      await upMemberSociety(id);
      this.getSocietyMembers()
    }
  },
  watch: {
    pageNo() {
      this.getSocietyMembers()
    }
  }
}
</script>

<style scoped lang="scss">

</style>